<template>
  <div>
    <el-form :inline="true">
      <el-form-item label="用户名:">
        <el-autocomplete
          v-model.trim="userData.userName"
          :fetch-suggestions="querySearch"
          placeholder="请输入用户名"
          @select="handleSelect"
          @clear="clear"
          clearable
        ></el-autocomplete>
      </el-form-item>
      <el-form-item class="status" label="状态:">
        <el-select v-model="userData.status">
          <el-option label="全部" value></el-option>
          <el-option label="启用" value="0"></el-option>
          <el-option label="禁用" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <el-divider></el-divider>
    <div>
      <div>
        <span>用户信息表</span>
        <el-button class="createBtn" type="primary" @click="create"
          >创建</el-button
        >
      </div>
      <el-table border :data="tableList">
        <el-table-column
          prop="id"
          label="ID"
          width="180"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="userName"
          label="用户名"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="role"
          label="所属角色"
          width="280"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.role === "0" ? "管理员" : "超级管理员" }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="updateTime"
          label="更新时间"
          width="280"
          align="center"
        ></el-table-column>
        <el-table-column prop="status" label="状态" width="280" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.status === "0" ? "启用" : "禁用" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-link
              :underline="false"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-link
            >
            <el-link :underline="false" type="primary">{{
              scope.row.status === "0" ? "禁用" : "启用"
            }}</el-link>
          </template>
        </el-table-column>
        <template>
          <el-pagination
            background
            layout="prev, pager, next"
            :total="100"
          ></el-pagination>
        </template>
      </el-table>
    </div>
    <!-- 创建用户的对话框 -->
    <el-dialog title="新用户" :visible.sync="dialogFormVisibleCreate">
      <el-form>
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input autocomplete="off" :value="newData.newUserName"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input autocomplete="off" :value="newData.newPassWord"></el-input>
        </el-form-item>
        <el-form-item label="所属角色" :label-width="formLabelWidth">
          <el-input
            autocomplete="off"
            :disabled="true"
            value="管理员"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleCreate = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisibleCreate = false"
          >确 定</el-button
        >
      </div>
      <!-- 编辑用户信息的对话框 -->
    </el-dialog>
    <el-dialog title="编辑" :visible.sync="dialogFormVisibleEdit">
      <el-form>
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input autocomplete="off" :value="changeData.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input autocomplete="off" :value="changeData.passWord"></el-input>
        </el-form-item>
        <el-form-item label="所属角色" :label-width="formLabelWidth">
          <el-input
            autocomplete="off"
            :disabled="true"
            :value="changeData.role === '0' ? '管理员' : '超级管理员'"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleEdit = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisibleEdit = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "User",
  components: {},
  data() {
    return {
      userData: {
        userName: "", //用户名
        status: "0", //状态
      },
      changeData: {
        userName: "",
        passWord: "",
        role: "0",
      },
      newData: {
        newUserName: "",
        newPassWord: "",
        role: "0",
      },
      userNames: [], //用户名列表
      tableList: [], //元数据列表
      oldUser: "", //上次查询用户名
      total: 0, //总共的数量
      timeout: null,
      loading: false,
      formLabelWidth: "120px",
      options: {},
      dialogFormVisibleCreate: false, //  默认创建用户不显示
      dialogFormVisibleEdit: false, //默认编辑用户的对话框不呈现
    };
  },
  created() {
    // 获取元数据列表
    this.getUserDataLists();
  },
  methods: {
    getUserNames() {
      let params = {
        userName: this.userData.userName,
        page: 1,
        pageSize: 50,
      };
      return this.getUserList(params);
    },
    getUserDataLists() {
      let params = this.userData;
      return this.getUserList(params).then((data) => {
        this.tableList = data.records;
        this.total = data.total;
        this.tableList.page = data.current;
        this.tableList.pageSize = data.size;
      });
    },
    getUserList(data) {
      let _params = {
        userName: null,
        status: null,
        page: 1,
        pageSize: 10,
      };
      let params = Object.assign(_params, data);
      // console.log("params", params);
      return this.$axios
        .post(this.$api.user.getUserDataList, params)
        .then((res) => {
          // if(res.data.code === '201'){
          //     this.$message.error('您没有访问权限');
          //     this.$router.replace('/login');
          //     return;
          // }
          // console.log("getUserDataList res", res, res.data.data);
          let data = res.data.data;
          return data;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    search() {},
    handleEdit(index, row) {
      this.dialogFormVisibleEdit = true;
      // console.log("@index", index, "@row", row);
      this.changeData.userName = row.userName;
      this.changeData.passWord = row.passWord;
      this.changeData.role = row.role;
    },
    create() {
      this.dialogFormVisibleCreate = true;
      this.newData.newUserName = newUserName;
      this.newData.newUserName = newPassWord;
      this.newData.role = "0";
    },
    querySearch(value, cb) {
      if (!value.length || this.oldUser === value) {
        cb(this.userNames);
        return;
      }
      this.userNames = [];
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        this.getUserNames()
          .then((data) => {
            this.oldUser = value;
            this.userNames = data.records;
            cb(this.userNames);
          })
          .catch((err) => {
            cb(this.userNames);
          });
      }, 300);
    },
    // 数据更改之后重新获取数据
    handleCurrentChange(page) {
      this.userData.page = page;
      this.getUserDataLists();
    },
    // 某个数据源被选取
    handleSelect(item) {
      // console.log("item", item);
    },
    // 清空input中的内容
    clear() {
      this.titles = [];
    },
  },
};
</script>

<style scoped>
.status {
  margin-left: 50px;
}
.createBtn {
  float: right;
}
</style>
